<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <el-input v-model="tiaojiao" placeholder="请输入配件名" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin: 10px" @click="load"  >查询</el-button>
    </div>
    <el-table :data="tableData"  stripe  style="width: 100%">
<!--      <el-table-column fixed prop="id" sortable label="ID" width="150"/>-->
      <el-table-column label="封面" width="120">
        <template #default="scope">
          <el-image
              style="width: 100px;height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="carPartsName" label="汽车配件名称" width="120"/>
      <el-table-column prop="standard" label="规格" width="120"/>
      <el-table-column prop="carNumber" label="配件编号" width="120"/>
<!--      <el-table-column prop="buy_price" label="进价" width="120"/>-->
      <el-table-column prop="sale_price" label="价格" width="120"/>
<!--      <el-table-column prop="sub_number" label="缺货数量" width="120"/>-->
      <el-table-column  label="数量" width="120">
        <template #default="scope">
          <el-button @click="jianshao(scope.row)">-</el-button>
          {{scope.row.buy_number}}
          <el-button @click="zengjia(scope.row)">+</el-button>
        </template>
      </el-table-column>
      <el-table-column  label="小计" width="140">
        <template #default="scope">
          {{scope.row.sale_price*scope.row.buy_number}}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">

          <el-button type="primary" @click="add_to_cart(scope.row)">加入购物车</el-button>
<!--          <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row)">-->
<!--            <template #reference>-->
<!--              <el-button type="text">删除</el-button>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:10px 0">
      <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="100"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>

import request from "@/utils/request";


export default {
  name: 'GoodsList',
  components: {},
  data() {
    return {

      tiaojiao:'',
      currentPage: 1,
      total: 10,
      tableData: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/goods").then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    jianshao(row){
      if(row.buy_number===0){
        this.$message({
          type:"error",
          message:"不能再减少啦"
        })
        return
      }
      row.buy_number-=1
    },
    zengjia(row){
      row.buy_number+=1;
    },
    add_to_cart(row){
      let u=sessionStorage.getItem("user");
      let user=JSON.parse(u);
      request.get("/buy_detail/findone/"+user.id+"/"+row.carNumber).then(res=>{
        console.log(res)
        if(res.data!=null){
          this.$message({
            type:"warning",
            message:"订单已存在"
          })
          return
        }else{
          if(row.buy_number==0){
            this.$message({
              type:"error",
              message:"请至少选择一件哦"
            })
            return
          }
          let buy_detail={
            "carPartsName":row.carPartsName,
            "standard":row.standard,
            "carNumber":row.carNumber,
            "sale_price":row.sale_price,
            "cover":row.cover,
            "buy_number":row.buy_number,
            "user_id":user.id,
          }
          console.log(buy_detail)
          request.post("/buy_detail/save",buy_detail).then(res=>{
            console.log(res)
            this.$message({
              type:"success",
              message:"已添加至购物车"
            })
          })
        }
      })


    }

  }

}

</script>
